<script setup lang="ts">
import { useSound } from '@vueuse/sound'
import { sleep } from '@/utils/sleep'
import stepImg10_5 from '@/assets/common/12/step_01_0_5.jpg'
import stepImg11 from '@/assets/common/12/step_01_1.jpg'
import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const currentStepImg = ref(stepImg10_5)

const intro = useIntro({
  steps: [

    {
      element: '#Video1',
      intro: '请选中素材二',
      position: 'bottom',
    },
  ],
}, [

  {
    target: 'Video1',
    posotionCallback(info: DOMRect) {
      return { x: info.left + 40, y: info.top + 0 }
    },
  },

])

const appStore = useAppStore()
const { play } = useSound(correctAnswerSfx)
const router = useRouter()

const secendBar1 = [
  {
    label: '剪辑',
    icon: 'clip_2',
    callBack: () => { },
  },

  {
    label: '音频',
    icon: 'sound',
    callBack: () => { },
  },
  {
    icon: 'text',
    label: '文字',
    callBack: () => { },
  },
  {
    label: '贴纸',
    icon: 'paster',
    callBack: () => { },
  },
  {
    label: '画中画',
    icon: 'PIP',
    callBack: () => { },
  },
  {
    label: '特效',
    icon: 'effect',
    callBack: () => { },
  },
]
const secendBar2 = [
  {
    label: '分割',
    icon: 'split',
    callBack: () => { },
  },

  {
    label: '变速',
    icon: 'variableSpeed',
    callBack: () => { },
  },
  {
    icon: 'animation',
    label: '动画',
    callBack: () => { },
  },
  {
    label: '抖音玩法',
    icon: 'gameplay',
    callBack: () => { },
  },
  {
    label: '删除',
    icon: 'delete',
    callBack: () => { },
  },
]
const isShow = ref(false) // 控制操作后的提示部分
const b_isShow = ref(true) // 控制底部功能栏·切换
const isUnmounted = ref(false); // 控制是否打断跳转
async function handleVideo1() {
  play()
  currentStepImg.value = stepImg11
  b_isShow.value = false;
  intro.stop()
  // await sleep(1000)
  isShow.value = true;
  // await sleep(2000)
  setTimeout(() => {
    isShow.value = false;
    if (!isUnmounted.value) {
      router.push('Mask3_1')
    }
  }, 1000)
}

const set1 = setTimeout(async () => {
  
  intro.start()
}, 0);
onBeforeUnmount(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask2_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})
onUnmounted(() => {
  intro.stop()
  isUnmounted.value = true;
  console.log('Mask2_1 组件实例被卸载之前调用')
  clearTimeout(set1)
})

</script>

<template>
  <div class="no-click">
  </div>
  <div class="flex justify-between h-4em p-x-1em pt-1em ">
    <div>
      <i class="i-material-symbols-close mr-1em" />
      <i class="i-material-symbols-help-outline" />
    </div>

    <div>
      <n-button type="info" size="small" class="mr-1em">
        1080P<i class="i-material-symbols-arrow-drop-down-rounded" />
      </n-button>
      <n-button id="exportBtn" type="primary" size="small">
        导出
      </n-button>
    </div>
  </div>

  <div class="bg-#0A0A0A ">
    <div id="Video1" class=" Video1" @click.stop="handleVideo1" />
    <img :src="currentStepImg" class="w-full" style="height: 90%;">
  </div>

  <div v-if="b_isShow" class="flex h-4em items-center bg-#1C1C1C" style="position: absolute; bottom: 0px;width: 100%;">
    <div class="flex flex-1 overflow-x-auto scrollbar-none  ">
      <div v-for="item in secendBar1" :id="item.icon" :key="item.label" class="flex-col-center flex-1 min-w-16%"
        @click.stop="item.callBack">
        <png-icon :icon="item.icon" class="text-2em m-b-3px" />
        <div class="text-sm">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
  <div v-else class="flex h-4em items-center bg-#1C1C1C" style="position: absolute; bottom: 0px;width: 100%;">
    <div class="bg-#333 h-70% rounded flex-center m-x-0.5em">
      <i class="i-icon-park-outline-left" />
    </div>

    <div class="flex flex-1 overflow-x-auto scrollbar-none  ">
      <div v-for="item in secendBar2" :id="item.icon" :key="item.label" class="flex-col-center flex-1 min-w-16%"
        @click.stop="item.callBack">
        <png-icon :icon="item.icon" class="text-2em m-b-3px" />
        <div class="text-sm">
          {{ item.label }}
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
@media screen and (min-width:440px) {

  .Video1 {
    position: absolute;
    width: 143px;
    height: 46px;
    top: 435px;
    left: 210px;
  }

  .text {
    width: 100%;
    text-align: center;
    font-family: title, sans-serif;
    font-size: 30px;
    color: #E38710;
    position: absolute;
    // left: 75px;
    top: 261px;
    z-index: 999
  }

  .box1 {
    border: 2px solid #FDDE40;
    width: 214px;
    height: 66px;
    position: absolute;
    top: 424px;
    left: 120px;
  }

  .xian1 {
    position: absolute;
    width: 120px;
    height: 0;
    border: 1px solid #FDDE40;
    left: 163px;
    top: 358px;
    transform: rotate(-90deg);
  }

  .xian1 .jiantou {
    position: absolute;
    left: -12px;
    top: -7.7px;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-right: 8px solid #FDDE40;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
  }
}

@media screen and (max-width:440px) {

  .Video1 {
    position: absolute;
    width: 37vw;
    height: 12vw;
    top: 107vw;
    left: 51vw;
  }
}
@media screen and (max-width:390px) {

  .Video1 {
    position: absolute;
    width: 37vw;
    height: 12vw;
    top: 109vw;
    left: 51vw;
  }
}
@media screen and (max-width:340px) {

  .Video1 {
    position: absolute;
    width: 37vw;
    height: 12vw;
    top: 111vw;
    left: 51vw;
  }

}

.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
</style>